<template>
  <div class="orderItem">
    <div class="orderItemHeader">
      <div class="orderItemHeaderImg"><img src="/static/images/user/dian@2x.png" alt="">我的订单结算</div>
      <div class="orderItemHeaderState">{{txtStatus}}</div>
    </div>
    <order-item-intro 
    v-for="(itemlist, index) in orderShopItem.lineItems"
    :key="index"
    :shopItem = "itemlist"
    :orderShopItemList = "orderShopItem"
    >
    </order-item-intro>
    <div class="code_btn" @click="aa" v-if="orderShopItem.orderType=='核销订单' && (orderShopItem.status == 1 || orderShopItem.status == 2)">生成二维码</div>
    <div class="btnDIv" v-if="isShowBtn">
      <div v-if="orderShopItem.status === 0" @click="cancelOrder(orderShopItem.orderNo)">取消订单</div>
      <div v-if="orderShopItem.status === 0" @click="toPayFor(orderShopItem.orderNo)">去付款</div>
      <div v-if="orderShopItem.status === 3" @click="cancelOrder(orderShopItem.orderNo)">取消订单</div>
      <div v-if="orderShopItem.status === 3" @click="lookIndetail(orderShopItem.bargain.bargainOrderNo)">查看详情</div>
      <div v-if="orderShopItem.status === 2" @click="lookLogistics(orderShopItem.orderNo)">查看物流</div>
      <div v-if="orderShopItem.status === 2" @click="confirmRecive(orderShopItem.orderNo)">确认收货</div>
      <div v-if="orderShopItem.status === 10" @click="haveLose()">已失效</div>
      <div v-if="orderShopItem.status === 4" @click="haveCancel()">已取消</div>
      <div v-if="orderShopItem.status === 11" @click="haveComplete()">已完成</div>
    </div> 
  </div> 
</template>
<script>
import orderItemIntro from '@/components/user/order-item-intro'
export default {
    components: {
      orderItemIntro
    },
    props:{
      orderShopItem:{
        type: Object
      }
    },
    methods:{
      aa(){
        this.$emit("getCode")
      },
      cancelOrder(orderNo){//取消订单
        this.$http.get(`order/${orderNo}/cancel`,'','',false).then((data)=>{ 
          this.$emit("refresh")
        })
      },
      toPayFor(orderNo){//去付款 需要传入订单号
        this.$http.get(`order/${orderNo}/rePay`,'','',false).then((data)=>{ 
          if(data.data.code === 25){
            wx.setStorageSync('orderNo', orderNo)
            const url = "../order-share/main";
            wx.navigateTo({ url }) 
          }else{
            wx.requestPayment({
              'timeStamp': data.data.data.timeStamp,
              'nonceStr': data.data.data.nonceStr,
              'package': data.data.data.package,
              'signType': data.data.data.signType,
              'paySign': data.data.data.paySign,
              'success': (res) => {
              },
              'fail': (res) =>{
              }
            })
          }            
        })
      },
      lookIndetail(orderNo){//查看详情
        const url = `../share/main?bargainOrderNo=${orderNo}`;
        wx.navigateTo({ url }) 
      },
      lookLogistics(orderNo){//查看物流
        const url = `../logistics/main?orderNo=${orderNo}`;
        wx.navigateTo({ url }) 
      },
      confirmRecive(orderNo){//确认收货
        this.$http.get(`order/${orderNo}/receive`,'','',false).then((data)=>{ 
          this.$emit("refresh")
        })
      },
      haveLose(){//已失效
        console.log("已失效") 
      },
      haveComplete(){//已完成
        console.log("已完成") 
      },
      haveCancel(){//已取消
        console.log("已取消") 
      },
    },
    computed:{
      isShowBtn(){//是否显示按钮
        if(this.orderShopItem.status === 0){
          return true
        }else if(this.orderShopItem.status === 2){
          return true
        }else if(this.orderShopItem.status === 3){
          return true
        }else{
          return false
        }
      },
      txtStatus(){
        var txt = ""
        switch(this.orderShopItem.status){
          case 0:
            txt = "待付款"
            return txt;
          case 1:
            txt = "待发货"
            return txt;
          case 2:
            txt = "待收货"
            return txt;
          case 3:
            txt = "分享中"
            return txt;
          case 4:
            txt = "已取消"
            return txt;
          case 5:
            txt = "退款中"
            return txt;
          case 6:
            txt = "拒绝退款"
            return txt;
          case 7:
            txt = "同意退款"
            return txt;
          case 8:
            txt = "退款失败"
            return txt;
          case 9:
            txt = "成功退款"
            return txt;
          case 10:
            txt = "已失效"
            return txt;
          case 11:
            txt = "已完成"
            return txt;
          default:
            txt = "已完成"
            return txt;
        }
      }
    },
  }
</script>
<style scoped>
.orderItem{
  background: #fff;
  margin-top: 20rpx;
  overflow: hidden;
}
.orderItemHeader{
  height: 90rpx;
  display: flex;
  align-items: center;
  padding: 0 24rpx;
}
.orderItemHeader .orderItemHeaderImg{
  color: #9e9e9e;
  font-size: 28rpx;
  flex: 1;
  display: flex;
  align-items: center;
}
.orderItemHeader .orderItemHeaderImg img{
  width:33rpx;
  height:33rpx;
  display: inline-block;
  margin-right: 20rpx;
}
.orderItemHeader .orderItemHeaderState {
  color: #e38a8a;
  font-size: 28rpx;
  display: flex;
  align-items: center;
}
.orderShop{
  background: #fafafa;
  padding: 20rpx 24rpx;
  display: flex;
}
.orderShop .orderShopImg {
  width:180rpx;
  height:180rpx;
  margin-right: 28rpx;
}
.orderShop .orderShopImg img{
  width:180rpx;
  height:180rpx;
  display: block;
}
.orderShop .shopTxt{
  flex: 1;
  overflow: hidden;
  position: relative;
  line-height: 40rpx;
}
.orderShop .shopTxt .shopName{
  font-size:28rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 15rpx;
}
.orderShop .shopTxt .shopNorms{
  font-size:28rpx;
  color:darkgray;
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 15rpx;
}
.orderShop .shopTxt .moneyNum{
  display: flex;
  position: absolute;
  bottom: 15rpx;
  width: 100%;
}
.orderShop .shopTxt .moneyNum .shopMoney{
  flex: 1;
  font-size:28rpx;
  color:#E38B8B;
}
.orderShop .shopTxt .moneyNum .shopNum{
  font-size:28rpx;
  width:51rpx;  
}
.btnDIv{
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid #efeff4;
  padding: 0 24rpx;
}
.btnDIv>div{
  width: 160rpx;
  height: 60rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: #2a2a2a;
  border: 1px solid #2a2a2a;
  border-radius: 6rpx;
  margin-left: 10rpx;
}
.code_btn{
  font-size: 24rpx;
  color: #459A31;
  text-align: right;
  padding: 24rpx;
  font-weight: bold
}
</style>


